<template>
    <div class="fooAdd">
        <van-checkbox v-if="showCheckBox" :name="item.id" checked-color="#ffc400" class="fooAdd_check"></van-checkbox>
        <img :src="item.pic" alt="">
        <div class="text">
            <div class="title">
                {{ item.title }}
                <div class="price">￥{{item.price}} </div>
            </div>
            <van-icon name="add-o" v-if="item.add" @click="addClick(item.id)"/>
            <van-stepper v-else v-model="item.num" :min="1" :name="item.id" @change="onchange"/>
            
        </div>
    </div>
</template>

<script setup>
let props = defineProps(['item','addClick','showCheckBox'])

const onchange = (value) => {   
    // 默认传递一个参数
    console.log(value);
}
</script>

<style scoped lang="less">
    .fooAdd{
        display: flex;
        justify-content: space-between;
        margin-bottom:30px;
        img{
            width:60px;
            height:60px;
            margin-right: 10px;
            border-radius: 10px;;
        }
    }
    .text{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width:100%;
        position: relative;
        .title{
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            // width:calc(100% - 60px)
            padding:0 10px;
        }
        .van-icon{
            color:red;
            font-size: 20px;
            position: absolute;
            right:40px;
            bottom:5px;
        }
    }
    .fooAdd_check{
        margin-right: 10px;
        width:30px;
    }
</style>
